<template>
  <div class="back_img">
    <div style="padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom)">
      <!-- 添加返回按钮 -->
      <div class="back-button" @click="goBack">
        <span class="back-icon">返回</span>
      </div>
      <div class="dadwafgada" style="padding-top: 100px; display: flex; justify-content: center">
        <text class="awdawdfa">{{ hdinfo.activityName }}</text>
      </div>
      <div class="abbb">
        <div
          style="
            padding: 5px;
            font-weight: 900;
            background: linear-gradient(90.00000000004499deg, #ffffff 0%, #fdff6e 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-style: 34rpx;
          "
        >
          {{ hdinfo.startTime.substring(0, 10) }}- {{ hdinfo.endTime.substring(0, 10) }}
        </div>
        <!--    <div class="buttonmda">发送弹幕参与抽奖！</div> -->
      </div>
      <div class="bbbccc">
        <div class="address" style="text-align: center; font-family: 'dymh'; padding-top: 16rpx; color: #ffffff">活动地点</div>
        <div
          class="addresss"
          style="width: 80%; height: 80%; margin: 0 auto; font-weight: bold; color: #480006; text-align: center; text-transform: none; font-family: 'dymh'; color: #480006; margin-top: 20rpx"
        >
          {{ hdinfo.activityPlace }}
        </div>
      </div>
      <div class="bbbccc2">
        <div class="address" style="text-align: center; font-family: 'dymh'; padding-top: 16rpx; color: #ffffff; margin-bottom: 20rpx">活动详情</div>
        <u-parse
          class="addresss"
          :content="hdinfo.activityInfo"
          style="width: 80%; height: 80%; margin: 0 auto; font-weight: bold; color: #480006; text-align: left; text-transform: none; font-family: 'dymh'; color: #480006; padding: 0 20px"
        >
        </u-parse>
      </div>
      <div class="bbbccc3">
        <div>
          <div class="address" style="text-align: center; font-family: 'dymh'; padding-top: 16rpx; color: #ffffff">活动说明</div>
          <div
            class="addresss"
            style="
              width: 80%;
              height: 80%;
              margin: 0 auto;
              font-weight: bold;
              color: #480006;
              text-align: center;
              text-transform: none;
              font-family: 'dymh';
              color: #480006;
              margin-top: 20rpx;
            "
          >
            {{ hdinfo.activityIllustrate }}
          </div>
        </div>
      </div>
      <div @click="golink" class="buttonmda">{{ buttonText }}</div>
    </div>
  </div>
</template>

<script>
import { getactivity, getactivitylist } from "../../../utils/api/vote";
import { IMG_URL } from "../../../config/index";

export default {
  data() {
    return {
      IMG_URL,
      hdinfo: {}, //活动信息
      isActivityEnded: false, // 活动是否已结束
      activeid: "",
      isActivityEnded: false, // 活动是否已结束
      isActivityStarted: false, // 活动是否已开始
    };
  },
  methods: {
    // 添加返回方法
    goBack() {
      uni.switchTab({ url: "/pages_h5/index_two/index" });
    },
    getactivitylists() {
      getactivitylist().then((res) => {
        this.activelist = res.rows;
        console.log("🚀 ~ this.activelist:", this.activelist);
        // 循环遍历activelist，查找isOpen为0的活动id
        let found = false;
        for (let i = 0; i < this.activelist.length; i++) {
          if (this.activelist[i].isOpen == 0) {
            // 找到isOpen为0的活动，传递该活动id
            this.gettactive(this.activelist[i].id, this.activelist[i].activityName);
            this.activeName = this.activelist[i].activityName;
            found = true;
            break; // 只处理第一个找到的isOpen为0的活动
          }
        }

        // 只有在没有找到isOpen为0的活动时才弹出提示
        if (!found) {
          /* 没有活动弹出提示退出界面 */
          uni.showModal({
            title: "提示",
            content: "暂无已上线活动哦~",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                uni.switchTab({ url: "/pages_h5/index_two/index" });
              }
            },
          });
        }
      });
    },
    gettactive(id, activeName) {
      this.activeid = id;
      getactivity(id)
        .then((res) => {
          this.hdinfo = res.data;
          // 判断活动是否已结束
          this.checkActivityStatus(id);
        })
        .catch((err) => {
          console.error("获取活动信息失败:", err);
        });
    },
    // 检查活动状态
    checkActivityStatus() {
      if (this.hdinfo.startTime && this.hdinfo.endTime) {
        // 兼容iOS的日期解析
        const startDate = this.parseDate(this.hdinfo.startTime);
        const endDate = this.parseDate(this.hdinfo.endTime);
        const now = new Date();
        // 判断活动是否已经开始
        this.isActivityStarted = now >= startDate;
        // 判断活动是否已结束
        this.isActivityEnded = now > endDate;
      }
    },
    // 兼容iOS的日期解析函数
    parseDate(dateString) {
      if (!dateString) return new Date();

      // 如果已经是Date对象，直接返回
      if (dateString instanceof Date) return dateString;

      // 如果是时间戳，直接创建Date对象
      if (typeof dateString === "number") return new Date(dateString);

      // 处理常见的日期格式
      // 支持 yyyy-MM-dd HH:mm:ss 或 yyyy/MM/dd HH:mm:ss 格式
      if (typeof dateString === "string") {
        // 尝试替换日期分隔符
        let formattedString = dateString.replace(/-/g, "/");

        // 如果包含空格但没有T，则添加T
        if (formattedString.includes(" ") && !formattedString.includes("T")) {
          formattedString = formattedString.replace(" ", "T");
        }

        // 尝试用标准格式解析
        const parsedDate = new Date(formattedString);
        if (!isNaN(parsedDate.getTime())) {
          return parsedDate;
        }

        // 如果上述方法都失败，尝试手动解析
        const parts = dateString.match(/^(\d{4})-(\d{2})-(\d{2})(?:\s+(\d{2}):(\d{2}):(\d{2}))?$/);
        if (parts) {
          const year = parseInt(parts[1], 10);
          const month = parseInt(parts[2], 10) - 1; // 月份从0开始
          const day = parseInt(parts[3], 10);
          const hour = parts[4] ? parseInt(parts[4], 10) : 0;
          const minute = parts[5] ? parseInt(parts[5], 10) : 0;
          const second = parts[6] ? parseInt(parts[6], 10) : 0;

          return new Date(year, month, day, hour, minute, second);
        }
      }

      // 默认情况
      return new Date(dateString);
    },
    golink() {
      if (!this.isActivityStarted) {
        // 活动未开始
        uni.showToast({
          title: "活动尚未开始",
          icon: "none",
        });
        return;
      }

      if (this.isActivityEnded) {
        // 活动已结束，跳转到投票页面
        uni.navigateTo({ url: "/pages_h5/myCenter/components/votelist?activeid=" + this.activeid + "&activeName=" + this.activeName });
      } else {
        // 活动进行中，跳转到报名页面
        uni.navigateTo({ url: "/pages_h5/myCenter/components/actaddper?activeid=" + this.activeid + "&activeName=" + this.activeName });
      }
    },
  },
  onLoad() {
    this.getactivitylists();
  }, // 计算按钮文本
  computed: {
    buttonText() {
      if (!this.isActivityStarted) {
        return "活动未开始";
      } else if (this.isActivityEnded) {
        return "活动已结束";
      } else {
        return "立即报名节目";
      }
    },
  },
};
</script>
<style>
.dawddwdZz {
  width: 30%;
  /* margin: 5px; */
}
.adawdedaw {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px;
}
.back_img {
  width: 100%;
  min-height: 100vh;
  background: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/21/999.-----------_20251021104331A080.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
/* 添加返回按钮样式 */
.back-button {
  position: absolute;
  top: calc(100rpx + constant(safe-area-inset-top));
  top: calc(100rpx + env(safe-area-inset-top));
  left: 30rpx;
  z-index: 999;
  width: 110rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.back-icon {
  color: #fff;
  font-family: "iconfont" !important;
  font-size: 30rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.abbb {
  margin: 0 auto;
  margin-top: -50rpx;
  width: 95%;
  min-height: 255rpx;
  background: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/21/Group 332_20251021101642A079.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbbccc {
  margin: 0 auto;
  margin-top: 150rpx;
  width: 95%;
  min-height: 204rpx;
  background: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/21/Group 339_20251021104528A082.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*   display: flex;
  align-items: center;
  justify-content: center; */
}
.bbbccc2 {
  margin: 0 auto;
  width: 95%;
  min-height: 355rpx;
  background: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/21/Group 340_20251021111229A083.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*   display: flex;
  align-items: center;
  justify-content: center; */
}
.bbbccc3 {
  margin: 0 auto;
  width: 95%;
  min-height: 204rpx;
  background: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/21/Group 339_20251021104528A082.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*   display: flex;
  align-items: center;
  justify-content: center; */
}
.dadwafgada {
  transform: rotate(-5deg);
}
.awdawdfa {
  font-family: "ruizhi";
  font-size: 40px;
  color: #fff;
  letter-spacing: 5px;
  text-stroke: 4px #f92a4c;
  color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(to top, #fff, #fdff6e);
}
.buttonmda {
  margin: 0 auto;
  width: 90%;
  min-height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px rgb(255, 251, 0) solid;
  margin-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  margin-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>
